<template>
  <div id="gd_map">
     <!-- 展示地图容器 -->
    <div v-if="showType==2" class="mapContext" id="showMap"></div>
    <div v-if="showType==2&&longitude==null" class="noPointShow" >暂无地理位置信息</div>
    <!-- 选点工具 -->
    <el-input v-if="showType==1" :readonly="true" placeholder="请点击右侧地图按钮选择经纬度(输入框只读)" v-model="selectPointData.res">
      <template slot="append">
        <el-button @click="selectMapShow=true" title="点击选择经纬度" type="success" icon="el-icon-location"></el-button>
      </template>
    </el-input>

    <!-- 弹窗地图 -->
    <el-dialog
      title="地图选点（点击地图选择地理位置）"
      :visible.sync="selectMapShow"
      width="70%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      :modal="false"
      @opened="initSelectMap()">
      <span>{{ selectPointData.longitude==null?'暂未选择点':"经度："+selectPointData.longitude+"纬度："+selectPointData.latitude }}</span>
      <div class="mapContext2" id="selectMap"></div>
      <div style="margin-top: 10px;display: flex;justify-content: flex-end">
        <el-button @click="closeSelect">取消</el-button>
        <el-button type="primary" @click="doSaveSelect">确定</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'gd_map',
  props:{
    // 组件类别： 1. 选点 2. 展示点
    showType:{
      type:String,
      default:1
    },
    // 经度
    longitude:{
      type: Number,
      //default: 116.404
      default: null
    },
    // 纬度
    latitude:{
      type: Number,
      // default: 39.915
      default: null
    },
    // 展示层级号
    zoom:{
      type: Number,
      default: 15
    },
    // 展示标题
    showTile: {
      type: String,
      default: "定位详情"
    },
    // 展示详细地址
    showAddress:{
      type: String,
      default: null
    }
  },
  data() {
    return {
       // 地图对象
      map:null,
      // 中心坐标点对象
      centerPoint:null,
      // 经纬度信息
      selectPointData:{
        longitude:null,
        latitude:null,
        res:null
      },
      // 选择点对象
      selectPointObj:null,
      // 选点弹窗
      selectMapShow:false
    }
  },
  mounted() {
    if(this.showType){
      this.initShowMap();
    }else{
      if(this.longitude!=null){
        this.selectPointData.res = "经度："+this.longitude+"纬度："+this.latitude;
      }
    }

  },
  methods:{
    // 初始化展示地图
    initShowMap(){
      let _this = this;
      this.map = new BMapGL.Map("showMap");
      this.centerPoint = new BMapGL.Point(_this.longitude, _this.latitude);
      this.map.centerAndZoom(this.centerPoint, _this.zoom);
      this.map.enableScrollWheelZoom(true);
      var marker = new BMapGL.Marker(this.centerPoint);        // 创建标注
      this.map.addOverlay(marker);                     // 将标注添加到地图中

      if(this.showAddress!=null){
        var opts = {
          width : 250,
          height: 50,
          title : this.showTile
        }
        var infoWindow = new BMapGL.InfoWindow("地址："+_this.showAddress, opts);  // 创建信息窗口对象
        marker.addEventListener("click", function(){
          _this.map.openInfoWindow(infoWindow, _this.centerPoint); //开启信息窗口
        });
      }

      this.map.enableScrollWheelZoom(true);
      var menu = new BMapGL.ContextMenu();
      var txtMenuItem = [
        {
          text: '放大一级',
          callback: function () {
            _this.map.zoomIn();
          }
        }, {
          text: '缩小一级',
          callback: function () {
            _this.map.zoomOut();
          }
        }
      ];
      for (var i = 0; i < txtMenuItem.length; i++) {
        menu.addItem(new BMapGL.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100));
      }
      _this.map.addContextMenu(menu);
    },
    // 初始化选点地图
    initSelectMap(){
      let _this = this;
      this.map = new BMapGL.Map("selectMap");
      this.centerPoint = new BMapGL.Point(_this.longitude==null?116.404:_this.longitude, _this.latitude==null?39.915:_this.latitude);
      this.map.centerAndZoom(this.centerPoint, _this.zoom);
      var selectpointTemp = new BMapGL.Point(_this.longitude, _this.latitude);
      var marker3 = new BMapGL.Marker(selectpointTemp);
      this.map.addOverlay(marker3);

      this.selectPointData.latitude = this.latitude;
      this.selectPointData.longitude = this.longitude;
      this.selectPointData.res = "经度："+this.longitude+"纬度："+this.latitude;

      this.map.enableScrollWheelZoom(true);
      // 创建城市选择控件
      var cityControl = new BMapGL.CityListControl({
        // 控件的停靠位置（可选，默认左上角）
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // 控件基于停靠位置的偏移量（可选）
        offset: new BMapGL.Size(10, 5)
      });
      // 将控件添加到地图上
      this.map.addControl(cityControl);
      this.map.addEventListener('click', function(e) {
         _this.map.clearOverlays();
         _this.selectPointData.longitude = e.latlng.lng;
         _this.selectPointData.latitude = e.latlng.lat;
         _this.selectPointData.res = "经度："+e.latlng.lng+"纬度："+e.latlng.lat;
        _this.selectPointObj = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
        var marker2 = new BMapGL.Marker(_this.selectPointObj);
        _this.map.addOverlay(marker2);
      });
    },
    // 选择关闭
    closeSelect(){
        this.selectMapShow = false;
        this.selectPointData = {
          longitude:null,
          latitude:null,
          res:this.longitude==null?null:"经度："+this.longitude+"纬度："+this.latitude
        }
    },
    // 选择确定
    doSaveSelect(){
      this.selectMapShow = false;
      this.$emit("mapSelectChange",this.selectPointData);
    }
  }
}
</script>

<style scoped>
#gd_map{
  width: 100%;
  height: 100%;
}

.mapContext{
  width: 100%;
  height: 100%;
  position: relative;
}

.mapContext2{
  width: 100%;
  height: 60vh;
}

.noPointShow{
  position: relative;
  top: -320px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  font-weight: bolder;
  letter-spacing: 4px;
}

</style>
